<!DOCTYPE html>
<html lang="zh">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>txt</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" type="text/css" href="../css/login-style.css">
    <!--弹出层样式-->
    <link rel="stylesheet" href="../css/alert.css">


    <script src="../js/jquery-3.3.1.js"></script>

    <script src='../js/SyntaxHighlighter/shCore.js'></script>
    <script src='../js/SyntaxHighlighter/makeSy.js'></script>
    <!--弹出层代码-->
    <script src='../js/alert.js'></script>
    <script src="../js/jquery.validate.min.js"></script>
    <script src="../js/messages_zh.js"></script>
    <!-- <script type="text/javascript" src="../js/login-vector.js"></script> -->
    <script>
        $("#entry_btn").click(function () {
            Notiflix.Notify.Init();
            Notiflix.Report.Init();
            Notiflix.Confirm.Init();
            Notiflix.Loading.Init({
                clickToClose: true
            });

        })
    </script>

    <script type="text/javascript">
        $(function () {
            $("#entry_form").validate({
                rules: {
                    loginName: {required: true},
                    password: {required: true}
                }, messages: {
                    loginName: {required: "请输入用户名!"},
                    password: {required: "请输入密码!"},
                    vc: {required: "请输入验证码!"}
                }
            });
        })

        function run(ele) {
            ele.src = "/UserLoginServlet?method=getVcImg&time=" + new Date().getTime();
        }
    </script>

    <!--设置提示的具体形状-->
    <style>
        .error {
            font-family: '楷体';
            color: #f5f7f9;
            font-size: 20px;
        }
    </style>

    <!--ajax代码-->
    <!--弹窗-->
    <script src="../js/LoginTC.js"></script>
</head>

<body>
<div class="w1004 alert-box">
    <div class="box" id="showBox">
        <div class="box-comment">
            <p>欢迎您进入远航师生系统！</p>
            <button class="b_click">click</button>
        </div>
    </div>
    <div class="mov_img">
        <img src="../images/content-bg1.jpg" class="layer" data-depth="0.5" alt="" srcset="">
    </div>

    <div id="container">
        <div id="output" class="layer" data-depth="1.5">
            <div class="containerT">
                <h1>用户登录</h1>
                <form class="form" id="entry_form" method="post" action="/UserLoginServlet?method=login">
                    <input type="text" placeholder="用户名" id="entry_name" name="loginName" required="required">
                    <input type="password" placeholder="密码" id="entry_password" name="password" required="required">
                    <input type="text" placeholder="验证码" name="vc" required="required" id="entry_Vc" minlength="4"
                           maxlength="4"><br>
                    <img src="/UserLoginServlet?method=getVcImg" id="imgCheck" onclick="run(this)"><br>
                    <button type="button" onclick="suba()" id="entry_btn">登录</button>
                    <a href="/pages/register.html">
                        <button type="button" id="entry_reg">注册</button>
                    </a><br><br><br>

                </form>
            </div>
        </div>
    </div>

    <script src="../js/parallax.js"></script>
    <!-- <script type="text/javascript">
        $(function () {
            Victor("container", "output"); //登陆背景函数
            $("#entry_name").focus();
            $(document).keydown(function (event) {
                if (event.keyCode == 13) {
                    $("#entry_btn").click();
                }
            });
        });
    </script> -->
    <script>
        var scene = document.querySelector('.mov_img');
        var parallax = new Parallax(scene, {
            calibrateX: false,
            calibrateY: true,
            invertX: false,
            invertY: true,
            limitX: false,
            limitY: 10,
            scalarX: 2,
            scalarY: 8,
            frictionX: 0.2,
            frictionY: 0.8
        });
    </script>
    <!-- 遮盖层显示消失 -->
    <script>
        function my$(ele) {
            return document.querySelector(ele);
        }

        my$('.b_click').onmouseover = function () {
            my$('.box').style.opacity = "0.6";
            return false;
        }
        my$('.b_click').onmouseout = function () {
            my$('.box').style.opacity = "1";

        },
            my$('.b_click').onclick = function () {
                my$('.box').style.opacity = "0";
                setTimeout(function () {
                    my$('.box').style.display = "none";
                }, 1000);
                return false;

            }
    </script>

</div>
</body>


</html>